import React from 'react';
import {Button, Card, Col, Row, Space, Typography} from 'antd';
import styled from 'styled-components';
import {useLocation} from "@@/exports";
import {history} from '@umijs/max';

const {Text} = Typography;

const StyledCard = styled(Card)`
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }

  .ant-card-body {
    padding: 20px;
  }
`;

const QuickAccessCard = styled(StyledCard)`
  .quick-access-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    font-size: 24px;
  }
`;

export interface QuickAccessItem {
  title: string;
  icon: React.ReactNode;
  color: string;
  description: string;
  path: string;
}

interface QuickAccessProps {
  items: QuickAccessItem[];
}

const QuickAccess: React.FC<QuickAccessProps> = ({items}) => {

  return (
    <StyledCard title="快捷入口">
      <Space direction="vertical" style={{width: '100%'}}>
        {items.map((item, index) => (
          <QuickAccessCard key={index} hoverable>
            <Row align="middle">
              <Col>
                <div className="quick-access-icon" style={{background: `${item.color}15`}}>
                  {React.cloneElement(item.icon as React.ReactElement, {style: {color: item.color}})}
                </div>
              </Col>
              <Col style={{flex: 1}}>
                <Text strong style={{display: 'block'}}>{item.title}</Text>
                <Text type="secondary" style={{fontSize: '12px'}}>{item.description}</Text>
              </Col>
              <Col>
                <Button
                  type="text"
                  style={{color: item.color}}
                  onClick={() => {
                    history.push(item.path);
                  }}
                >
                  进入
                </Button>
              </Col>
            </Row>
          </QuickAccessCard>
        ))}
      </Space>
    </StyledCard>
  );
};

export default QuickAccess;
